
<template>
  <div class="favorite-page">
    <div class="header">
      <h2>我的收藏</h2>
      <el-button v-if="isManaging" type="danger" @click="deleteSelected">删除</el-button>
      <el-button v-if="isManaging" type="success" @click="moveSelected">移动到...</el-button>
      <el-button v-if="isManaging" type="info" @click="isManaging = false">取消</el-button>
    </div>

    <el-tabs v-model="activeTab" type="card">
      <!-- 收藏夹 -->
      <el-tab-pane label="收藏夹" name="folders">
        <div v-if="!selectedFolder">
          <el-row :gutter="20" class="item-row">
            <el-col v-for="folder in folders" :key="folder.folderId" :xs="24" :sm="12" :md="8" :lg="6">
              <div class="custom-card" @click="openFolder(folder)">
                <img src="/favicon.ico" alt="图片" class="item-image" />
                <div class="item-content">
                  <h3 class="item-title">{{ folder.name }}</h3>
                  <p class="item-desc">收藏数：{{ folder.favourites.length }}</p>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
        <div v-else>
          <el-button type="text" @click="closeFolder">返回</el-button>
          <el-row :gutter="20" class="item-row">
            <el-col v-for="item in selectedFolder.favourites" :key="item.favouriteId" :xs="24" :sm="12" :md="8" :lg="6">
              <div class="custom-card">
                <img :src="item.imagePath || '/favicon.ico'" alt="图片" class="item-image" />
                <div class="item-content">
                  <h3 class="item-title">{{ item.title || '未命名收藏' }}</h3>
                  <p class="item-desc">{{ item.description || '暂无描述' }}</p>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script setup>
  import { ref, onMounted } from "vue";
  import { userAllFavourite } from "@/api/bookmark.js";
  import { useStore } from "vuex";
  
  const store = useStore();
  const activeTab = ref("folders");
  
  // API 收藏数据
  const folders = ref([]);
  const selectedFolder = ref(null);
  const isManaging = ref(false);
  const selectedItems = ref([]);
  
  // 获取数据（使用 then 处理）
  const getallfavorites = () => {
    userAllFavourite({
      userId: store.state.userInfo.userId,
      name: "",
      folderId: null,
    }).then(res => {
      if (res.state === 0 && res.data) {
        folders.value = res.data;
      }
    }).catch(error => {
      console.error("获取收藏数据失败:", error);
    });
  };
  
  // 打开收藏夹
  const openFolder = (folder) => {
    selectedFolder.value = folder;
  };
  
  // 关闭收藏夹
  const closeFolder = () => {
    selectedFolder.value = null;
  };
  
  // 批量删除选中内容
  const deleteSelected = () => {
    if (!selectedItems.value.length) return alert("请选择要删除的内容");
  
    selectedFolder.value.favourites = selectedFolder.value.favourites.filter(
      fav => !selectedItems.value.includes(fav.favouriteId)
    );
  
    selectedItems.value = [];
    isManaging.value = false;
  };
  
  // 批量移动选中内容
  const moveSelected = () => {
    if (!selectedItems.value.length) return alert("请选择要移动的内容");
  
    const folderId = parseInt(prompt("请输入目标收藏夹 ID："));
    const targetFolder = folders.value.find(folder => folder.folderId === folderId);
  
    if (!targetFolder) return alert("收藏夹不存在");
  
    // 移动收藏项
    selectedFolder.value.favourites = selectedFolder.value.favourites.filter(fav => {
      if (selectedItems.value.includes(fav.favouriteId)) {
        targetFolder.favourites.push(fav);
        return false;
      }
      return true;
    });
  
    selectedItems.value = [];
    isManaging.value = false;
  };
  
  onMounted(() => {
    getallfavorites();
  });
  </script>
  
    <style scoped>
      .favorite-page {
        padding: 20px;
        background: #f9f9f9;
      }
      h2 {
        margin-bottom: 20px;
        font-size: 24px;
        font-weight: bold;
        color: #333;
      }
      .header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-actions {
  display: flex;
  gap: 10px;
}

.manage-toolbar {
  display: flex;
  gap: 10px;
  margin: 10px 0;
}
  .item-row {
        margin-top: 20px;
      }
      .item-card {
  background: transparent !important; /* 背景完全透明 */
  border: none !important; /* 移除边框 */
  box-shadow: none !important; /* 移除阴影 */
  transition: all 0.3s ease-in-out;
}

.item-card:hover {
  background: linear-gradient(45deg, rgba(255, 255, 255, 0.6), rgba(0, 0, 0, 0.1)); /* 斜角渐变背景 */
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2), 0 4px 15px rgba(0, 0, 0, 0.1); /* 更强的阴影效果 */
  transform: scale(1.05); /* 放大效果，突出卡片 */
  opacity: 1; /* 确保显示完全 */
  backdrop-filter: blur(15px); /* 增强的磨砂玻璃效果 */
  cursor: pointer; /* 鼠标悬浮时改变光标 */
}
      /* ✅ 图片美化 */
      .item-image {
        width: 100%;
        height: 160px;
        object-fit: cover;
        display: block;
      }
      
      /* ✅ 文字部分独立 */
      .item-content {
  background: transparent;
  border: none;
}

      .item-title {
        margin: 0;
        font-size: 16px;
        font-weight: bold;
        color: #333;
      }
      .item-desc {
        margin-top: 6px;
        font-size: 14px;
       
      }
      .favorite-page {
  padding: 20px;
  background: #f9f9f9;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.manage-toolbar {
  display: flex;
  gap: 10px;
  margin: 10px 0;
}

.manage-btn {
  margin-top: 10px;
}

      </style>

